<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Peity </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
</head>

<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">


  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Peity chart
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Charts</a></li>
        <li class="breadcrumb-item active">Peity</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
	  <div class="callout callout-info">
        <h2 class="page-header no-border mb-0 mt-0">Peity Chart</h2>
		 <p><small>Peity is a jQuery plugin that converts an element's content into a mini pie, donut, line or bar chart.<br><a class="fs-12" href="http://benpickles.github.io/peity/" target="_blank">Official documentation</a></small></p>
      </div>
		
		
      <div class="row">
		  
		<div class="col-12 col-lg-9">
          <!-- Bar CHART -->
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Bar Chart</h3>
            </div>
            <div class="box-body">
				<div class="row">
				  <div class="col-md-6 col-lg-4 text-center">
					<span class="bar" data-peity='{ "fill": ["#1e88e5"], "height": 36, "width": 120, "padding":0.2 }'> 5,3,9,6,5,9,7,3,5,2</span>
				  </div>

				  <div class="col-md-6 col-lg-4 text-center">
					<hr class="d-md-none">
					<span class="bar" data-peity='{ "fill": ["#1e88e5", "#f3f5f6"], "height": 64, "width": 250, "padding":0.2 }'> 5,3,2,-1,-3,-2,2,3,5,2</span>
				  </div>

				  <div class="col-md-6 col-lg-4 text-center">
					<hr class="d-lg-none">
					<span class="bar" data-peity='{ "fill": ["#398bf7", "#fc4b6c"], "height": 96, "width": 250, "padding":0.2 }'> 0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
				  </div>
				</div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

        </div>
        <!-- /.col-->
		  
		<div class="col-12 col-lg-3">
          <!-- Dynamic CHART -->
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Updating Charts</h3>
            </div>
            <div class="box-body">
              <span class="updating-chart" data-provide="peity" data-type="line" id="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,7,3,5,2</span>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->

        </div>
        <!-- /.col-->
        <div class="col-12">
          <!-- Pie CHART -->
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Pie</h3>
            </div>
            <div class="box-body">
              <p><code>class="pie"</code> applies to <em>&lt;span&gt;</em></p>
				<div class="row gap-y">
				  <div class="col-6 col-md-2 text-center">
					<span class="pie" data-peity='{ "fill": ["#1e88e5", "#eeeeee"], "radius": 19 }'>1/5</span>
					<p><small>1/5</small></p>
				  </div>

				  <div class="col-6 col-md-2 text-center">
					<span class="pie" data-peity='{ "fill": ["#fc4b6c", "#eeeeee"], "radius": 21 }'>226/360</span>
					<p><small>226/360</small></p>
				  </div>

				  <div class="col-6 col-md-2 text-center">
					<span class="pie" data-peity='{ "fill": ["#36a2eb", "#eeeeee"], "radius": 24 }'>0.52/1.561</span>
					<p><small>0.52/1.561</small></p>
				  </div>

				  <div class="col-6 col-md-2 text-center">
					<span class="pie" data-peity='{ "fill": ["#ffce56", "#eeeeee"], "radius": 28 }'>1,4</span>
					<p><small>1,4</small></p>
				  </div>

				  <div class="col-6 col-md-2 text-center">
					<span class="pie" data-peity='{ "fill": ["#ff9f40", "#eeeeee"], "radius": 32 }'>226,134</span>
					<p><small>226,134</small></p>
				  </div>
				  
				  <div class="col-6 col-md-2 text-center">
					<span class="pie" data-peity='{ "fill": ["#36a2eb", "#ff9f40", "#fc4b6c"], "radius": 36 }'>1,2,1</span>
					<p><small>3,2,1</small></p>
				  </div>
				</div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
		</div>
        <!-- /.col -->
		<div class="col-12">
          <!-- Donut CHART -->
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Donut Chart</h3>
            </div>
            <div class="box-body">
				<div class="row gap-y">
				  <div class="col-6 col-md-2 text-center">
					<span class="donut" data-peity='{ "fill": ["#1e88e5", "#eeeeee"], "radius": 19 }'>1/5</span>
					<p><small>1/5</small></p>
				  </div>

				  <div class="col-6 col-md-2 text-center">
					<span class="donut" data-peity='{ "fill": ["#fc4b6c", "#f3f5f6"], "radius": 21 }' >226/360</span>
					<p><small>226/360</small></p>
				  </div>

				  <div class="col-6 col-md-2 text-center">
					<span class="donut" data-peity='{ "fill": ["#36a2eb", "#f3f5f6"], "innerRadius": 20, "radius": 24 }'>0.52/1.561</span>
					<p><small>0.52/1.561</small></p>
				  </div>

				  <div class="col-6 col-md-2 text-center">
					<span class="donut" data-peity='{ "fill": ["#ffce56", "#f3f5f6"], "innerRadius": 10, "radius": 28 }' >1,4</span>
					<p><small>1,4</small></p>
				  </div>

				  <div class="col-6 col-md-2 text-center">
					<span class="donut" data-peity='{ "fill": ["#ff9f40", "#f3f5f6"], "innerRadius": 30, "radius": 32 }' data-provide="peity" data-type="donut" data-fill="#ff9f40,#f3f5f6" data-size="64" data-inner-radius="30">226,134</span>
					<p><small>226,134</small></p>
				  </div>

				  <div class="col-6 col-md-2 text-center">
					<span class="donut" data-peity='{ "fill": ["#36a2eb", "#ff9f40", "#fc4b6c"], "radius": 36 }' >1,2,1</span>
					<p><small>1,2,1</small></p>
				  </div>
				</div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
		</div>
        <!-- /.col -->
		  
		<div class="col-12">
          <!-- Line CHART -->
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Line Chart</h3>
            </div>
            <div class="box-body">
				<div class="row">
				  <div class="col-md-6 col-lg-4 text-center">
					<span class="line1">5,3,9,6,5,9,7,3,5,2</span>
				  </div>

				  <div class="col-md-6 col-lg-4 text-center">
					<hr class="d-md-none">
					<span class="line2">5,3,2,-1,-3,-2,2,3,5,2</span>
				  </div>

				  <div class="col-md-6 col-lg-4 text-center">
					<hr class="d-lg-none">
					<span class="line3">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>
				  </div>
				</div>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
		</div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

    </section>
    <!-- /.content -->
  </div>

  

</div>
<!-- ./wrapper -->

	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.js"></script>
	
	<!-- peity -->
	<script src="../../../assets/vendor_components/jquery.peity/jquery.peity.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	
	<!-- 洲博通 for Chart purposes -->
	<script src="../../js/pages/peity.js"></script>
	

</body>
</html>
